<style>
	.w-e-text-container {
        height: 450px !important;
        /*!important是重点，因为原div是行内样式设置的高度300px*/
    }
</style>
<script src="extend/cover/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="extend/cover/hammer.js" type="text/javascript" charset="utf-8"></script>
<script src="extend/cover/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="extend/cover/jquery.photoClip.min.js?vs=1 type=" text/javascript" charset="utf-8"></script>
<form class="layui-form" action="" lay-filter="form-group">
	<!-- 隐藏表单 -->
	<input type="text" name="aid" style="display:none">
	<input type="text" name="cdat" style="display:none">
	<!-- 隐藏表单 -->
	<div class="layui-fluid" lay-title="编辑文章">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md9">
				<div class="layui-card">
					<div class="layui-card-header">文章标题</div>
					<div class="layui-card-body layui-row layui-col-space10">
						<div class="layui-col-md12">
							<input type="text" name="title" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-card">
					<div class="layui-card-header">文章内容</div>
					<div class="layui-card-body layui-row layui-col-space10">
						<div class="layui-col-md12" id="editor">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="layui-card layui-form">
					<div class="layui-card-header" style="height:30px;">
					</div>
					<div class="layui-card-body layui-row layui-col-space12">
						<div class="layui-row" style="text-align: center;">
							<div class="layui-inline">
								<!-- 封面图片 -->
								<input type="hidden" name="cover" value="">
								<div style="min-height:1px;line-height:40px;text-align:center;position:relative;" ontouchstart="">
									<div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">
										<div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
											<div id="clipArea" style="margin:10px;height: 520px;"></div>
											<div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
												<button type="button" id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#5a8bff;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存封面</button>
											</div>
										</div>
									</div>
									<div id="view" style="width:214px;height:162px;" title="请上传 428*321 的封面图片"></div>
									<div style="height:10px;"></div>
									<div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#5a8bff;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
										<button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i>点击上传封面图</button>
										<input type="file" id="cover" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">
									</div>						
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-form-item">
							<label class="layui-form-label">状态</label>
							<div class="layui-input-inline">
								<select name="status" id="status">
									<option value="2">隐藏</option>
									<option value="1">公开</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">分类</label>
							<div class="layui-input-inline" id="cids">
							</div>
						</div>						
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">作者</label>
							<div class="layui-input-inline">
								<input type="text" name="author" lay-verify="title" autocomplete="off" placeholder="请输入作者" class="layui-input">
							</div>
						</div>		
						<div class="layui-form-item">
							<label class="layui-form-label">关键字</label>
							<div class="layui-input-block">
								<input type="text" name="keyword" lay-verify="title" autocomplete="off" placeholder="多个关键字中间用逗号隔开" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">描述</label>
							<div class="layui-input-block">
								<textarea name="description" id="description" placeholder="请输入描述" class="layui-textarea"></textarea>
							</div>
						</div>										
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" type="button" lay-submit="" lay-filter="articles-submit">立即提交</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
<script type="text/html" id="s_categorys">
	<select name="cid" id="cid">
        {{#  layui.each(d, function(index, item){ }}
        <option value="{{ index }}">{{ item }}</option>
        {{#  }); }}
    </select>
</script>
<script type="text/javascript">
	var $ = layui.$;
	var jquery2 = layui.$;
	let E = window.wangEditor;
	var editor = new E('#editor');
	// fcup上传id
	editor.customConfig.fcupId = 'article_id';
	editor.customConfig.pasteFilterStyle = false;
	editor.customConfig.menus = [
		'head', // 标题
		'bold', // 粗体
		'fontSize', // 字号
		'fontName', // 字体
		'italic', // 斜体
		'underline', // 下划线
		'strikeThrough', // 删除线
		'foreColor', // 文字颜色
		'backColor', // 背景颜色
		'link', // 插入链接
		'list', // 列表
		'justify', // 对齐方式
		'quote', // 引用
		'emoticon', // 表情
		'image', // 插入图片
		'fcup', // 上传图片，配合fcup插件
		'table', // 表格
		'video', // 插入视频
		'code', // 插入代码
		'undo', // 撤销
		'redo', // 重复
		'showCode' // 显示源代码
	];
	editor.create();
	$(".w-e-icon-image").attr("id", "fcup_js");
</script>
<script>
	// 上传案例
	let up = new fcup({

		id: "article_id", // 绑定id

		url: layui.api.upload, // url地址

		checkurl: layui.api.checkUploadImg, // 检查上传url地址

		type: "jpg,png,jpeg,gif", // 限制上传类型，为空不限制

		shardsize: "0.001", // 每次分片大小，单位为M，默认1M

		minsize: '', // 最小文件上传M数，单位为M，默认为无

		maxsize: "50", // 上传文件最大M数，单位为M，默认200M

		// headers: {"version": "fcup-v2.0"}, // 附加的文件头

		// apped_data: {}, //每次上传的附加数据

		// 定义错误信息
		errormsg: {
			1000: "未找到该上传id",
			1001: "类型不允许上传",
			1002: "上传文件过小",
			1003: "上传文件过大",
			1004: "请求超时"
		},

		// 开始事件                
		start: () => {
			console.log('开始上传');
		},

		// 等待上传事件，可以用来loading
		beforeSend: () => {
			console.log('等待请求中');
		},

		// 上传进度事件
		progress: (num, other) => {
			editor.progress.show(num);
			console.log(num);
			console.log('上传进度' + num);
			console.log("上传类型" + other.type);

			// 以下仅作参考,并不是太准确		 
			console.log("已经上传" + other.current);
			console.log("剩余上传" + other.surplus);
			console.log("已用时间" + other.usetime);
			console.log("预计时间" + other.totaltime);
		},

		// 错误提示
		error: (msg) => {
			layui.layer.alert(msg);
		},
		// 检查地址回调,用于判断文件是否存在,类型,当前上传的片数等操作
		checksuccess: (res) => {

			let data = res ? eval('(' + res + ')') : '';

			let code = data.code;

			let url = data.data.url;

			let msg = data.msg;

			let index = data.data.file_index ? parseInt(data.data.file_index) : 0;

			// 错误提示
			if (code == 1) {
				layui.layer.alert(msg);
				return false;
			}

			// 已经上传
			if (code == 2) {
				editor.cmd.do('insertHTML', '<img src="' + url + '">');
				return false;
			}

			// 如果提供了这个参数,那么将进行断点上传的准备
			if (index != 0) {
				// 设置上传切片的起始位置		   
				up.setshard(index);
			}

			// 如果接口没有错误，必须要返回true，才不会终止上传
			return true;
		},
		// 上传成功回调，回调会根据切片循环，要终止上传循环，必须要return false，成功的情况下要始终要返回true;i
		success: (res) => {

			let data = res ? eval('(' + res + ')') : '';

			let msg = data.msg;

			let url = data.data.url + "?" + Math.random();

			let code = data.code;

			// 错误提示
			if (data.code == 1) {
				layui.layer.alert(msg);
				return false;
			}

			// 成功上传
			if (data.code == 2) {
				editor.cmd.do('insertHTML', '<img src="' + url + '">');
				layui.layer.alert('上传完成');
			}

			// 如果接口没有错误，必须要返回true，才不会终止上传循环
			return true;
		}
	});
</script>
<script>
	var coverData = '';

	function getBase64(imgUrl) {
		window.URL = window.URL || window.webkitURL;
		var xhr = new XMLHttpRequest();
		xhr.open("get", imgUrl, true);
		// 至关重要
		xhr.responseType = "blob";
		xhr.onload = function() {
			if (this.status == 200) {
				//得到一个blob对象
				var blob = this.response;
				console.log("blob", blob)
				// 至关重要
				let oFileReader = new FileReader();
				oFileReader.onloadend = function(e) {
					let base64 = e.target.result;
					console.log("方式一》》》》》》》》》", base64);
				};
				oFileReader.readAsDataURL(blob);
				//====为了在页面显示图片，可以删除====
				var img = document.createElement("img");
				img.onload = function(e) {
					window.URL.revokeObjectURL(img.src); // 清除释放
				};
				let src = window.URL.createObjectURL(blob);
				img.src = src
				document.getElementById("#view").appendChild(img);
			}
		}
		xhr.send();
	}

	layui.use(['admin', 'form', 'laytpl'], function(admin, form, laytpl) {
		var $ = layui.$;
		var element = layui.element;
		var router = layui.router();
		// 拉取分类
		layui.categorys = [];
		admin.get({
			url: layui.api.categorys + 'getAll',
			async: false,
			success: function(result) {
				layui.categorys = result.data;
				let getTpl = document.getElementById('s_categorys').innerHTML,
					ciddom = document.getElementById('cids');
			    if(layui.categorys){
				    laytpl(getTpl).render(layui.categorys, function(html) {
					    ciddom.innerHTML = html;
					    form.render('select', 'cid');
				    })
				}
			}
		});

		// 拉取文章详情
		if (router.search.id) {
			admin.get({
				url: layui.api.articles + 'get?id=' + router.search.id,
				async: false,
				success: function(result) {
					let res = result.data;
					let status = res.status;
					$.each(res, function(i, item) {
						if (i == 'content') {
							editor.txt.html(item);
						} else if (i == 'status') {
							if (status == 1) {
								$("#status option[value='1']").prop("selected", true);
							} else {
								$("#status option[value='2']").prop("selected", true);
							}
						} else if (i == 'cid') {
							$("#cid option[value='" + item + "']").prop("selected", true);
						} else if (i == 'remark' || i == 'description') {
							if (item != null) {
								$('textarea[name="' + i + '"]').text(item);
							}
						} else if (i == 'cover') {
							if (item != null) {
							    $('#view').html('<img src="' + layui.coverUrl + item + '" style="width: 214px; height: 162px;">');
							    $('input[name="' + i + '"]').val(item);
							}
						} else {
							$('input[name="' + i + '"]').val(item);
						}
					});
					//console.log(result);
				}
			});
		} else {
			layui.view.setTitle('新增文章', router.href);
		}
		form.render();

		// 提交数据
		form.on('submit(articles-submit)', function(data) {
			/** 屏蔽回车 **/

			var theEvent = window.event;
			var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
			if (code == 13) {
				return false;
			}

			if (typeof coverData != '') {
				data.field.cover_data = coverData;
			} else {
				data.field.cover_data = null;
			}

			let datas = data.field;
			
			var time = Math.round(new Date().getTime() / 1000).toString();
			if (!router.search.id) {
				datas.cdat = time;
			}

			datas.udat = time;
			
			let now = new Date(datas.cdat*1000);
			datas.nian = now.getFullYear();
            datas.yue = now.getMonth();
		    datas.ri = now.getDate();	
			
			let text = editor.txt.html();
			if (!text) {
				layer.msg('内容不能为空');
				return false;
			}
			datas.content = text;
			datas.description = $("#description").val();
			text = '';				
			// 这一段是用于判断是否有相同的值的
			datas.onlykey = 'title';
			datas.onlyname = datas.title;
			admin.post({
				url: layui.api.articles + 'save',
				type: 'post',
				data: datas,
				async: false,
				success: function(result) {
					layer.alert(result.msg, {
						title: '提交提示'
					}, function() {
						// 这里加上时间戳,刷新页面
						admin.navigate('/list/articles/time=' + time);
					});

				}
			});
			return false;
		});
	});
	var clipArea = new bjj.PhotoClip("#clipArea", {
		size: [642, 481.5], // 截取框的宽和高组成的数组。默认值为[260,260]
		outputSize: [642, 481.5], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
		//outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
		file: "#cover", // 上传图片的<input type="file">控件的选择器或者DOM对象
		view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
		ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
		loadStart: function() {
			// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
			$('.cover-wrap').fadeIn();
			$('#view').html('');
		},
		loadComplete: function() {
			// 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
			console.log("照片读取完成");
		},
		//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
		clipFinish: function(dataURL) {
			// 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
			$('.cover-wrap').fadeOut();
			$('#view').css('background-size', '100% 100%');
			coverData = dataURL;
			console.log(dataURL);
			return false;
		}
	});
</script>
